<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?=$config_title?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .header {
            background-color: <?=$config_bgcolor?>;
            color: white;
			height:55px;
            padding: 10px 0;
            text-align: center;
            font-size: 23px;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 5px 15px #B3B3B3;background-image:linear-gradient(135deg, <?=$config_bgcolor?>, <?=generateShade($config_bgcolor, 20)?>);
        }
        
        .login-container {
            flex: 1;
			display: flex;
			flex-direction: column;
			/* 移除 justify-content: center */
			padding: 20px;
			padding-top: 70px;  /* 增加顶部内边距 */
			max-width: 500px;
			margin: 0 auto;
			width: 100%;
        }
        
        .input-group {
            margin-bottom: 20px;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .input-field {
            padding: 15px;
            border: none;
            border-bottom: 1px solid #eee;
            width: 100%;
            font-size: 16px;
        }
        
        .input-field:last-child {
            border-bottom: none;
        }
        
        .input-field:focus {
            outline: none;
            background-color: #f9f9f9;
        }
        
        .login-btn {
            background-color: <?=$config_bgcolor?>;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
            margin-bottom: 15px;
			box-shadow: 1.5px 1.5px 5px #bbbbbb;
        }
        
        .login-btn:hover {
            background-color: <?=$config_bgcolor?>;
        }
        
        .captcha-container {
            margin-bottom: 20px;
        }
        
        .captcha-input {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .captcha-field {
            flex: 1;
            padding: 15px;
            border: none;
            font-size: 16px;
			width:100px;
        }
        
        .captcha-field:focus {
            outline: none;
            background-color: #f9f9f9;
        }
        
        .get-captcha {
            padding: 0 15px;
            color: <?=$config_bgcolor?>;
            font-size: 14px;
            white-space: nowrap;
            background: none;
            border: none;
            cursor: pointer;
			
        }
        
        .get-captcha:disabled {
            color: #999;
            cursor: not-allowed;
        }
        
        @media (min-width: 768px) {
            .login-container {
                padding: 40px;
            }
        }
    </style>

<? if($config_rsa_pubkey) { ?>
<script src="?act=getjscss&fn=js%2fenc.js"></script>
<? } ?>
<script type="text/javascript">
<? include(ADMIN_INC_ROOT."/js/func.js");?>
<? include(ADMIN_INC_ROOT."/js/login.js");?>
if(window.parent) {
	var url1 = window.parent.location.href+"";
	var url2 = location.href+"";
	if(url1 != url2) {
		window.parent.location.href = '?act=login';
	}
}
</script>

</head>
<body>
    <div class="header"><?=$config_title?></div>
    
    <div class="login-container">
        <div class="input-group">
            <input type="text" id="username" class="input-field" placeholder="请输入帐号" required />
            <input type="password" id="password" class="input-field" placeholder="请输入密码" required />
        </div>

		<div class="captcha-container" id="yzm_div" style="display:none">
            <div class="captcha-input">
                <input type="text" id="yzm" class="captcha-field" placeholder="短信验证码" required />
                <input type="button" id="yzmbt" class="get-captcha" onclick="resendYzm()" value="重新获取" />
            </div>
        </div>
        
        <input type="button" id="loginBt" class="login-btn" onclick="doLogin()" value="登　录" />
        
        
    </div>
</body>
</html>